<template>
    <div class="brs-progress">
        <div class="progress-wrapper" :style="{ background: borderColor, width: width, height: width }">
            <div class="progress-wrapper-circle__left" ref="leftp" :style="{ transform: `rotate(${leftProgress}deg)`, background: leftBorderColor, clip: leftClip}" ></div>
            <div class="progress-wrapper-circle__right" ref="rightp" :style="{ transform: `rotate(${rightProgress}deg)`, background: rightBorderColor, clip: rightClip}"></div>
            <div class="progress-wrapper-mask"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'brs-progress',
    props: {
        bgColor: {
            type: String,
            default: '#eeeeee'
        },
        borderColor: {
            type: String,
            default: '#FC4514'
        },
        width: {
            type: String,
            default: '300px'
        }
    },
    data(){
        return {
            progress: 0,
            totalProgress: 100,
            leftClip: null,
            rightClip: null,
            leftBorderColor: this.bgColor,
            rightBorderColor: this.bgColor
        }
    },
    computed: {
        rightProgress(){
            if(this.progress <= 50){
                return this.progress * 3.6
            }else{
                return 0
            }
        },
        leftProgress(){
            if(this.progress > 50){
                return (this.progress - 50) * 3.6
            }else{
                return 0
            }
        },
    },
    watch: {
        rightProgress(val){
            if(val === 0){
                this.rightBorderColor = this.borderColor
            }
        },
        leftProgress(val){
            if(val === 180){
                this.leftBorderColor = this.borderColor
            }
        }
    },
    mounted(){
        // let timer = null
        this.$nextTick(() => {
            let w = Number(this.width.replace('px', ''))
            this.leftClip = `rect(0, ${w / 2}px, auto, 0)`;
            this.rightClip = `rect(0, auto, auto, ${w / 2}px)`;
            // timer = setInterval(()=>{
            //     this.progress += 1
            //     if(this.progress >= 100){
            //         clearInterval(timer)
            //     }
            // }, 10)
        })
    }
}
</script>

<style lang="less" scoped>
    .brs-progress{
        .progress-wrapper{
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            .progress-wrapper-circle__left, .progress-wrapper-circle__right{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 50%;
                transition-timing-function: linear;
            }
            .progress-wrapper-circle__left{
                z-index: 1;
            }
            .progress-wrapper-circle__right{
                z-index: 2;
            }
            .progress-wrapper-mask{
                width: 80%;
                height: 80%;
                border-radius: 50%;
                background-color: #555;
                position: absolute;
                z-index: 3;
                top: 10%;
                left: 10%;
            }
        }
    }
</style>